<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dom Tree</title>
   <style>
     
   </style>
</head>

<body>
   <span class="border red width-25" id="s1">classList</span>
   <h1>标题一</h1>

   <script>
      console.log("document.nodeType:", document.nodeType); //9
      console.log("document.nodeName:", document.nodeName); //#document
      console.log("document.nodeValue:", document.nodeValue); //null

      console.log("body.nodeType:", document.body.nodeType); //1
      console.log("body.nodeName:", document.body.nodeName); //BODY
      console.log("body.nodeValue:", document.body.nodeValue); //null

      console.log('----------------------------------');
      console.log('直接获取:');
      var html = document.documentElement;
      console.log("html:", html);
      var head = document.head;
      console.log("head:", head);
      var body = document.body;
      console.log("body:", body);

      console.log('----------------------------------');
      console.log('找周围附近的元素对象:');
      console.log("body.parentNode:");
      console.log(document.body.parentNode);
      console.log("documentElement.children:");
      console.log(document.documentElement.children);

      console.log("documentElement.firstElementChild:");
      console.log(document.documentElement.firstElementChild);
      console.log("documentElement.lastElementChild:");
      console.log(document.documentElement.lastElementChild);

      console.log("body.previousElementSibling:");
      console.log(document.body.previousElementSibling);
      console.log("head.nextElementSibling:");
      console.log(document.head.nextElementSibling);

      //按id查找
      console.log('----------------------------------');
      console.log("按id查找s1");
      var span = document.getElementById("s1");
      console.log(span);

      console.log('----------------------------------');
      console.log("document.all:");
      //查看document.all
      console.log(document.all);
      console.log("[s1]", document.all["s1"]);
      console.log(".s1", document.all.s1);
      console.log("h1", document.all[7]);
   </script>
</body>

</html>